<template>
	<view class="loading">
		<view class="spinner">
			<view class="rect1"></view>
			<view class="rect2"></view>
			<view class="rect3"></view>
			<view class="rect4"></view>
			<view class="rect5"></view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.loading{
		//loading动画
		display: flex;
		justify-content: center;
		@keyframes stretchdelay {
			0%, 40%, 100% {
				transform: scaleY(0.6);
			}
			20% {
				transform: scaleY(1.0);
			}
		}
		.spinner {
			margin: 20upx 0;
			width: 60upx;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view {
				background-color: #f06c7a;
				height: 50upx;
				width: 6upx;
				border-radius: 6upx;
				animation: stretchdelay 1.2s infinite ease-in-out;
			}
			.rect2 {
			  animation-delay: -1.1s;
			}
			.rect3 {
			  animation-delay: -1.0s;
			}
			.rect4 {
			  animation-delay: -0.9s;
			}
			.rect5 {
			  animation-delay: -0.8s;
			}
		}
	}
</style>
